<template>
  <div class="split-pane-page-wrapper">
    <split-pane v-model="offset" @on-moving="handleMoving">
      <div slot="left" class="pane left-pane">
        <!-- <split-pane v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
          <div slot="top" class="pane top-pane"></div>
          <div slot="bottom" class="pane bottom-pane"></div>
          <div slot="trigger" class="custom-trigger">
            <icons class="trigger-icon" :size="22" type="resize-vertical" color="#fff"/>
          </div>
        </split-pane> -->
        <markdown-editor ref="markdownEditor" v-model="content1" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="400px" />
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="receiveData"
          :on-error="receiveError"
          :headers="myHeaders"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过2MB</div>
        </el-upload>
      </div>
      <div slot="right" class="pane right-pane">
        <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="400px" />
      </div>
    </split-pane>
  </div>
</template>

<script>
import MarkdownEditor from "../../components/tui-editor";
import SplitPane from '_c/split-pane'
import Icons from '_c/icons'
import { getToken } from '@/libs/util'

export default {
  name: 'home',
  components: {
    SplitPane,
    Icons,
    MarkdownEditor
  },
  data () {
    return {
      offset: 0.6,
      offsetVertical: '250px',
      content1:"请导入pdf....",
      content2:"等待pdf解析....",
      fileList: [{}],
      myHeaders:{
        token:getToken()
      }
    }
  },
  methods: {
    handleMoving (e) {
      console.log(e.atMin, e.atMax)
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      receiveData(response){
        response.pre_content = this.content1
        response.post_content = this.content2
        this.$message.success("文件解析成功！")
      },
      receiveError(err){
        this.$message.success("文件解析失败！")
      }
  }
}
</script>

<style lang="less">
.center-middle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.split-pane-page-wrapper{
  height: 400px;
  .pane{
    width: 100%;
    height: 500px;
    &.left-pane{
      background: white;
    }
    &.right-pane{
      background: white;
    }
    &.top-pane{
      background: white;
    }
    &.bottom-pane{
      background: white;
    }
  }
  .custom-trigger{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000000;
    position: absolute;
    .center-middle;
    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
    i.trigger-icon{
      .center-middle;
    }
  }
}
</style>
